<template>
    <div class="tabs">
        <div class="tabs-nav">
            <span v-for="(nav,index) in navList" :key="index" @click="tabClick(nav)"
                  :class="{'active': (nav.name || nav.label)==currentValue}">
                {{nav.label}}
            </span>
        </div>
        <div class="tabs-content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    import TabPane from './tabs-pane'
    import Vue from 'vue'

    Vue.component('TabPane', TabPane)

    export default {
        data() {
            return {
                currentValue: this.value,
                navList: []
            }
        },
        props: {
            value: {
                type: [String]
            }
        },
        updated() {
            this.currentValue = this.value
        },
        methods: {
            tabClick(nav) {
                let value = nav.name || nav.label
                this.currentValue = value
                this.$emit('update:value', value)
                this.$emit('switchClick', value)
            }
        },
        components: {
            TabPane
        }
    }
</script>

<style scoped lang="less">
    .tabs {
        height: 100%;
        background-color: #fff;

        .tabs-nav {
            height: 0.4rem;
            line-height: 0.38rem;
            background-color: #EAEEF7;
            font-size: 0.12rem;
            font-weight: normal;

            span {
                display: inline-block;
                margin: 0 .2rem;
                cursor: pointer;

                &.active {
                    border-bottom: 0.02rem solid #FF9A66;
                }
            }
        }

        .tabs-content {
            padding: 0.15rem;
        }
    }
</style>
